<template>
  <div class="box-content">
    <!-- 搜索框 -->
    <van-search
    v-model="keywords"
    shape="round"
    id="input1"
    show-action
    background="#4fc08d"
    placeholder="请输入搜索关键词"
    @focus="show0"
    @search="search"
    @cancel="show1"
    />
    <br>
    <!-- 榜单组件，默认显示 -->
    <AAA v-show="isShow0"></AAA>
    <!-- 点击搜索框进入搜索框组件 -->
    <SearchBoxVue v-show="isShow1" :historyList="this.historyList" :value="this.keywords" @getHistory="addHistory"></SearchBoxVue>
    <!-- 当输入搜索关键字并且按enter时，此组件显示，并加载与关键字有关的内容 -->
    <div v-show="isShow2" class="search-list">
      <div v-for="item in result" :key="item.id" >
        <router-link :to="'/pictureinfo/'+ item.id">
          <van-cell :value="item.keys" class="cell"/>
          <hr>
        </router-link>
      </div>
    </div>
    <br><br><br>
  </div>
</template>

<script>

import AAA from '@/components/Search/Search.vue'
import SearchBoxVue from '@/components/SearchBox/SearchBox.vue'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'Search',
  components: {
    AAA,
    SearchBoxVue
  },
  data () {
    return {
      // 搜索关键字
      keywords: '',
      // 展示AAA组件
      isShow0: true,
      // 展示SearchBoxVue组件
      isShow1: false,
      // 展示与关键字有关的内容
      isShow2: false,
      // 存放与关键字有关的信息，每次输入关键字，情况数组
      result: [],
      add: true
    }
  },
  watch: {
    keywords (newKey) {
      // console.info(newKey)
      const input1 = document.getElementById('input1')
      input1.addEventListener('keyup', this.debounce())
    }
  },
  computed: {
    ...mapState(['pictureInfo']),
    ...mapState(['historyList'])
  },
  methods: {
    ...mapMutations(['updatePictureInfo']),
    ...mapMutations(['updateHistoryList']),
    // 防抖
    debounce () {
      setTimeout(() => {
        this.search()
      }, 300)
    },
    // 当子组件点击搜索历史，子（SearchBoxVue）向父（当前组件）组件传当前点击的历史
    addHistory (val) {
      this.keywords = val
    },
    // 展示SearchBoxVue组件
    show0 () {
      this.isShow0 = false
      this.isShow2 = false
      this.isShow1 = true
    },
    // 展示AAA组件
    show1 () {
      this.isShow1 = false
      this.isShow2 = false
      this.isShow0 = true
    },
    // 展示与关键字有关的内容
    show2 () {
      this.isShow0 = false
      this.isShow1 = false
      this.isShow2 = true
    },
    // 获取所有图片关键字信息
    async getAllPictureInfo () {
      const { data: res } = await this.$http({
        url: '/picture/allpicturekeys',
        method: 'GET'
      })
      this.updatePictureInfo(res.data)
    },
    search () {
      // 每次搜索前 把之前的数据清空
      this.result = []
      // 每次输入的时候，让他显示出来
      this.show2()
      // 遍历拿到item，并判断值是否和搜索框关键字相似，一样就添加到result数组中
      this.pictureInfo.forEach((item) => {
        if ((String)(item.keys).includes(this.keywords)) {
          this.result.push(item)
        }
      })
      // console.log(this.result)
      this.get_search()
    },
    // 添加搜索历史到数据库
    addSearchHistory (history) {
      this.$http({
        url: '/picture/picturehistory',
        method: 'POST',
        params: {
          history
        }
      })
    },
    // 得到搜索历史
    async getSearchHistory () {
      const { data: res } = await this.$http({
        url: '/picture/picturehistory',
        method: 'GET'
      })
      if (res.status === 0) {
        this.updateHistoryList(res.data)
        // console.log(this.historyList)
      }
    },
    // 判断搜索历史是否有当前搜索内容
    isAdd () {
      this.add = false
      this.historyList.forEach(item => {
        // console.log(item.history)
        if (item.history === this.keywords) {
          // console.log('a')
          this.add = true
        }
      })
    },
    // 搜索时比较，关键字是否在历史中，不在就添加到搜索历史
    get_search () {
      this.isAdd()
      if (this.keywords === '') {
        return false
      } else if (this.add) {
        // console.log('ss')
        return false
      } else {
        // console.log(this.historyList)
        this.addSearchHistory(this.keywords)
      }
      // console.log(this.historyList)
    }
  },
  created () {
    this.getAllPictureInfo()
    this.getSearchHistory()
  }
}
</script>

<style lang="less" scoped>
@media screen and (min-width: 1280px) {
  .box-content{
    width: 70%;
    margin: auto;
  }
  .search-list{
    width: 80%;
    margin: auto;
  }
  .cell{
    padding: 10px 20px 10px 20px;
  }
}
.but1{
  background-color: white;
  float: right;
  border: 0px;
}
.cell{
    padding: 2px 8px 2px 8px;
  }
  a{
    color: black;
    text-decoration: none;
  }
</style>
